<template>
    <!--判断是否增加还是修改-->
    <el-dialog :title="!dataForm.id ? '新增' :'修改'" :rules="rules" :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose">

    <!--创建表单-->
    <el-form :model="dataForm" ref="dataForm" label-width="130px">
        <!--prop:向父组件传值-->
    
        
        <el-form-item label="职位名称"  prop="name">
            <el-input v-model="dataForm.name" placeholder="请输入职位名称"></el-input>
        </el-form-item>

        <el-form-item label="职位描述"  prop="remark">
            <el-input v-model="dataForm.remark" placeholder="请输入职位描述"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
    </div>
    </el-dialog>

</template>

<script>
    //impo是引入对象
    import qs from 'qs'

  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          name: "",
          remark: "",
          id: 0
        },

    //限制长度
    rules: {
          name: [
            { required: true, message: '请输入职位名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入职位描述', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
          ],
          
        }
      };
    },

    methods: {
        //对话框关闭
        dialogClose(){
            console.log("对话框关闭了")
        },

        //index.vue传进来的id
        //修改的用户信息要发请求
        init(id){
            //如果用户的id传进来了，就是id，没有则为0
            this.dataForm.id = id || 0;
            this.visible =true;//显示对话框
            this.$nextTick(()=>{
                //重置表单的所有字段
                this.$refs["dataForm"].resetFields();
                //判断
                if(this.dataForm.id){
                    var $this=this;
                    //发异步请求到后台获取这个用户数据
                    this.$axios.get(`http://localhost:8080/hrm/findJobById?id=`+id).then(function(response){
                        //判断状态是否为200
                        if(response.data && response.data.code===200){
                            //修改前显示弹窗里面的值
                            $this.dataForm.name=response.data.jobs.name;
                            $this.dataForm.remark=response.data.jobs.remark;
                        }
                    })
                }
            })
        },

        dataFormSubmit(){
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    var $this = this;
                    //alert(this.dataForm.id);
                    //没有表单的id是新增，有是修改
                    const url = `http://localhost:8080/hrm/`+(!this.dataForm.id ? "saveJob" : "updateJob");
                    //异步请求  qs.stringify(this.dataForm):整个表单序列化（整个表单数据会组装成dataForm: {username:'张三',password:'123'...}
                    this.$axios.post(url,qs.stringify(this.dataForm)).then(function(response){
                        //判断状态是否为200
                        if(response.data.code === 200){
                            $this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                //关闭弹窗
                                onClose: ()=> {
                                    $this.visible = false;
                                    //更新表中的内容
                                    $this.$emit("refreshDataList");
                                }
                            });
                        }else{
                            //不成功的提示
                        }
                    })
                }else{

                }
            });
        }
    }
  };
</script>